diff options
Diffstat (limited to 'src/routes/(app)/[username]')
5 files changed, 100 insertions, 39 deletions
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte index 93b7355c..95dd41a4 100644 --- a/src/routes/(app)/[username]/(profile)/+page.svelte +++ b/src/routes/(app)/[username]/(profile)/+page.svelte @@ -1,21 +1,42 @@ <script> - import { btc, f, sat } from "$lib/utils"; + import { invalidate } from "$app/navigation"; + import { btc, f, sat, post } from "$lib/utils"; import { onMount } from "svelte"; import Icon from "$comp/Icon.svelte"; import Balance from "$comp/Balance.svelte"; import DeleteItem from "$comp/DeleteItem.svelte"; import { t } from "$lib/translations"; + import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from "svelte-dnd-action"; + import { fade } from "svelte/transition"; + import { cubicIn } from "svelte/easing"; + import { flip } from "svelte/animate"; + const flipDurationMs = 200; + const dropTargetStyle = {}; + export let data; let { subject, user, items, rates } = data; $: refresh(data); let refresh = (d) => ({ items, subject, user, rates } = d); + $: dragDisabled = subject?.id !== user?.id let deleting; $: total = items.reduce((a, b) => a + b.price * b.quantity, 0); let del = (item) => { deleting = item; }; + + let consider = (e) => { + items = e.detail.items; + }; + + let finalize = async (e) => { + items = e.detail.items; + if (subject?.id === user?.id) { + await post("/api/items/sort", { items }); + invalidate("app:items"); + } + }; </script> {#if deleting} @@ -67,10 +88,11 @@ <div> <a href={`/${user.username}/items/create`} class="w-full"> <button - class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-full bg-black text-white" + class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-full bg-primary" > - <div class="mx-auto flex"> - <div class="my-auto text-2xl"> + <div class="mx-auto flex gap-2"> + <Icon icon="plus" style="w-8 mx-auto" /> + <div class="my-auto text-xl"> {$t("items.add")} </div> </div> @@ -79,14 +101,24 @@ </div> {/if} - <div class="grid grid-cols-2 gap-4"> - {#each items as i} + <div + class="grid grid-cols-1 md:grid-cols-2 gap-4" + use:dndzone={{ items, flipDurationMs, dropTargetStyle, dragDisabled }} + on:consider={consider} + on:finalize={finalize} + > + {#each items as i (i.id)} <div class="w-full text-center cursor-pointer hover:opacity-80" on:click={() => i.quantity++} > <div class="relative w-full h-64 overflow-hidden rounded-xl"> - {#if i.image} + {#if i[SHADOW_ITEM_MARKER_PROPERTY_NAME]} + <div + in:fade={{ duration: 200, easing: cubicIn }} + class="custom-shadow-item" + /> + {:else if i.image} <img src={`/api/public/${i.image}.webp`} alt={i.name} @@ -95,16 +127,12 @@ {:else} <div class="bg-gradient-to-r from-primary to-gradient mb-4 cursor-pointer hover:opacity-80 w-full h-full" - on:click={select} - on:keydown={select} alt="Banner" /> {/if} {#if user?.username === subject.username} <div class="flex gap-2 justify-center absolute top-2 right-2"> - <div - on:click|stopPropagation={() => i.quantity > 0 && i.quantity--} - > + <div on:click|stopPropagation={() => {}}> <a href={`/${user.username}/items/${i.id}`}> <button class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100" @@ -122,27 +150,31 @@ </div> {/if} </div> - <div class="bg-white rounded-xl p-2"> - <div class="flex"> - <div class="text-2xl mr-auto">{i.name}</div> - <div class="flex gap-2 my-auto"> - <div class="font-semibold"> - {f(i.price, subject.currency)} - </div> - <div class="text-secondary"> - {sat(btc(i.price, rates[subject.currency]))} + <div class="bg-white rounded-xl py-2"> + <div class="flex text-left gap-2"> + <div class="overflow-hidden"> + <div class="text-2xl break-words">{i.name}</div> + <div class="flex gap-2"> + <div class="font-semibold"> + {f(i.price, subject.currency)} + </div> + <div class="text-secondary"> + {sat(btc(i.price, rates[subject.currency]))} + </div> </div> </div> - </div> - <div class="flex gap-2"> - <div - class="ml-auto" - on:click|stopPropagation={() => i.quantity > 0 && i.quantity--} - > - <Icon icon="minus" style="w-10" /> + <div class="flex gap-1 ml-auto mb-auto justify-around tabular-nums"> + {#if i.quantity} + <div + on:click|stopPropagation={() => i.quantity > 0 && i.quantity--} + > + <Icon icon="minus" style="w-10 min-w-10" /> + </div> + {/if} + <div class="text-2xl my-auto text-center"> + {#if i.quantity}{i.quantity}{:else}—{/if} + </div> </div> - <div class="text-2xl my-auto">{i.quantity}</div> - <Icon icon="plus" style="w-10" /> </div> </div> </div> @@ -159,8 +191,11 @@ > <div class="mx-auto flex"> <div class="my-auto text-2xl"> - {f(total, subject.currency)} {$t("user.dashboard.checkout")} + {f(total, subject.currency)} + <span class="text-base"> + {sat(btc(total, rates[subject.currency]), subject.currency)} + </span> </div> </div> </button> @@ -168,3 +203,17 @@ </div> {/if} </div> + +<style> + .custom-shadow-item { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + visibility: visible; + background: #333; + opacity: 0.5; + margin: 0; + } +</style> diff --git a/src/routes/(app)/[username]/items/[id]/+page.server.js b/src/routes/(app)/[username]/items/[id]/+page.server.js index 960f9af4..4cfc952c 100644 --- a/src/routes/(app)/[username]/items/[id]/+page.server.js +++ b/src/routes/(app)/[username]/items/[id]/+page.server.js @@ -1,7 +1,7 @@ import { fd, auth, get, post } from "$lib/utils"; import { fail, redirect } from "@sveltejs/kit"; - export let load = async ({ cookies, params: { id } }) => { +export let load = async ({ cookies, params: { id } }) => { let item = await get(`/items/${id}`); return { item }; }; @@ -12,7 +12,6 @@ export const actions = { try { await post(`/items`, form, auth(cookies)); } catch (e) { - console.log(e); return fail(400, { message: e.message }); } diff --git a/src/routes/(app)/[username]/items/[id]/+page.svelte b/src/routes/(app)/[username]/items/[id]/+page.svelte index ddf4cf1d..49619a33 100644 --- a/src/routes/(app)/[username]/items/[id]/+page.svelte +++ b/src/routes/(app)/[username]/items/[id]/+page.svelte @@ -1,14 +1,18 @@ <script> import { t } from "$lib/translations"; import ItemForm from "$comp/ItemForm.svelte"; + import { fail } from "$lib/utils"; + export let data; - let { item } = data; - console.log(item) + export let form; + + $: form?.message && fail(form.message); + let { item, user } = data; </script> <div class="container max-w-xl mx-auto"> <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10"> {$t("items.edit")} </h1> - <ItemForm {item} /> + <ItemForm {item} {user} /> </div> diff --git a/src/routes/(app)/[username]/items/create/+page.server.js b/src/routes/(app)/[username]/items/create/+page.server.js index ea0571e7..6740f5f9 100644 --- a/src/routes/(app)/[username]/items/create/+page.server.js +++ b/src/routes/(app)/[username]/items/create/+page.server.js @@ -6,12 +6,14 @@ export const actions = { let form = await fd(request); try { await post("/items", form, auth(cookies)); + + console.log("YEAH"); } catch (e) { - console.log(e); + console.log("E", e) return fail(400, { message: e.message }); } - let success = `/${url.pathname.split('/')[1]}` + let success = `/${url.pathname.split("/")[1]}`; redirect(307, success); }, }; diff --git a/src/routes/(app)/[username]/items/create/+page.svelte b/src/routes/(app)/[username]/items/create/+page.svelte index 46ee8e0c..b81f0423 100644 --- a/src/routes/(app)/[username]/items/create/+page.svelte +++ b/src/routes/(app)/[username]/items/create/+page.svelte @@ -1,6 +1,13 @@ <script> import { t } from "$lib/translations"; import ItemForm from "$comp/ItemForm.svelte"; + import { fail } from "$lib/utils"; + + export let data; + export let form; + + $: form?.message && fail(form.message); + let { user } = data; let item = {}; </script> @@ -8,5 +15,5 @@ <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10"> {$t("items.add")} </h1> - <ItemForm {item} /> + <ItemForm {item} {user} /> </div> |